<script setup lang="ts">
  // import { useRoute } from "vue-router";
  import { computed } from "vue";
  import { useRoute, useRouter } from "vue-router";
  import TabBar from "./tabBar/index.vue";
  import { useUserStore, RecordItem } from "/@/store/modules/user";
  import dayjs from "dayjs";
  import { DatePickerColumnType } from "vant";
  const uRoute = useRoute();
  const router = useRouter();
  const showBottom = ref<boolean>(false);
  const username = ref<string>("");
  const card = ref<string>("");
  const bank = ref<string>("");
  const payAccount = ref<string>("");
  const money = ref<number>();
  const bz = ref<string>("");
  const currentDate = ref<Array<string>>([]);
  const currentTime = ref<Array<string>>([]);
  const currentIcon = ref<string>("cy");
  const payType = ref<number>(1);
  const dealDate = computed(() => {
    if (currentDate.value.length !== 2) {
      return "";
    } else {
      return currentDate.value[0] + "-" + currentDate.value[1];
    }
  });
  const dealTime = computed(() => {
    if (currentTime.value.length !== 2) {
      return "";
    } else {
      return currentTime.value[0] + ":" + currentTime.value[1];
    }
  });
  const finallyMoney = computed(() => userStore.getBalance);
  const show = ref<boolean>(false);
  const isDate = ref<boolean>(true);
  const userStore = useUserStore();
  const needZIndex = computed(() => userStore.getNeedZIndex);

  const icons = computed(() => userStore.getIcons);
  const includes = ["CompPage"];
  const columnsType = ref<DatePickerColumnType[]>(["month", "day"]);

  function handleEnter() {
    const trueDate = new Date().getFullYear().toString() + "-" + dealDate.value;
    let dateStr = "";
    if (trueDate === dayjs().format("YYYY-MM-DD")) {
      dateStr = "今天";
    } else if (trueDate === dayjs().subtract(1, "day").format("YYYY-MM-DD")) {
      dateStr = "昨天";
    } else {
      dateStr = dealDate.value;
    }

    showBottom.value = false;
    userStore.setBalance(payType.value, Number(money.value));
    const item: RecordItem = {
      id: new Date().getTime(),
      username: username.value,
      card: card.value,
      dealDate: dateStr,
      dealTime: dealTime.value,
      bank: bank.value,
      payAccount: payAccount.value,
      money: money.value,
      icon: currentIcon.value,
      payType: payType.value,
      note: finallyMoney.value,
      card4No: card.value.slice(-4),
      createTime: dayjs().format("YYYY-MM-DD HH:mm:ss").toString(),
      bz: bz.value,
      currentDate: currentDate.value,
      currentTime: currentTime.value,
    };
    userStore.addRecord(item);
  }
  function handleChangeActive(index: number, item: Record<any, string | number | boolean>) {
    userStore.changeIconActive(index);
    currentIcon.value = item.icon as string;
  }
  function handleShowDate() {
    show.value = true;
    isDate.value = true;
  }
  function handleShowTime() {
    show.value = true;
    isDate.value = false;
  }
  function handleShowBottom() {
    if (uRoute.meta.showBottom) {
      showBottom.value = true;
    }
  }
</script>

<template>
  <van-nav-bar
    left-arrow
    @click-left="router.back()"
    :title="uRoute.meta.title"
    v-if="uRoute.meta.showActionBar"
    :style="{ zIndex: needZIndex ? 2030 : 10, background: uRoute.meta.navbarBackgroundColor }"
  >
    <template #right>
      <van-space>
        <van-icon name="search" size="18" v-if="uRoute.meta.needSearch" />
        <van-icon :name="getAssetsImageUrl('kf_black.png')" size="18" v-if="uRoute.meta.needContract" />
        <van-icon name="ellipsis" size="18" @click="handleShowBottom" />
      </van-space>
    </template>
  </van-nav-bar>

  <RouterView>
    <template #default="{ Component, route }">
      <transition mode="out-in" appear>
        <keep-alive v-if="route.meta.keepAlive" :include="includes">
          <component :is="Component" :key="route.fullPath" />
        </keep-alive>
        <component v-else :is="Component" :key="route.fullPath" />
      </transition>
    </template>
  </RouterView>
  <TabBar v-if="uRoute.meta.showTabbar" />
  <van-popup v-model:show="showBottom" position="bottom" :style="{ height: '50%' }">
    <div class="w-full h-full overflow-hidden absolute">
      <div class="p-3 flex items-center fixed w-full">
        <div class="flex-1 flex"><van-button plain type="default" @click="showBottom = false">取消</van-button></div>
        <div class="flex-1 flex justify-end">
          <van-button plain type="success" @click="handleEnter">确认</van-button>
        </div>
      </div>
      <div class="w-full h-20"></div>
      <div class="w-full h-[600px] relative overflow-auto">
        <van-cell-group inset>
          <van-field v-model="username" label="姓名" />
          <van-field v-model="card" label="交易卡号" />
          <div class="px-4 flex items-center mt-2" @click="handleShowDate">
            <div class="text-[0.95rem] text-dark-300">交易日期</div>
            <div class="flex-1 ml-8 h-5">{{ dealDate }}</div>
          </div>
          <van-divider />
          <div class="px-4 flex items-center mt-2" @click="handleShowTime">
            <div class="text-[0.95rem] text-dark-300">交易时间</div>
            <div class="flex-1 ml-8 h-5">{{ dealTime }}</div>
          </div>
          <van-divider />
          <van-field v-model="bank" label="付款银⾏" />
          <van-field v-model="payAccount" label="付款账号" />
          <div class="px-5 mt-3 text-sm">
            <van-radio-group v-model="payType" direction="horizontal">
              <van-radio :name="1">支出</van-radio>
              <van-radio :name="2">收入</van-radio>
            </van-radio-group>
          </div>

          <van-field v-model="money" type="number" label="交易金额" />
          <van-field v-model="bz" label="转账附言" />
          <div class="font-bold text-sm px-3 mt-3">图标：</div>
          <div class="grid grid-cols-3 gap-4 w-full h-auto mt-5 mb-12">
            <div
              class="w-ful flex justify-center"
              v-for="(item, index) in icons"
              :key="(item.icon as string)"
              @click="handleChangeActive(index, item)"
            >
              <div class="flex items-center border w-16 p-1 h-7 rounded-full" :class="[item.active && 'bg-gray-200']">
                <img :src="getAssetsImageUrl(`${item.icon}.png`)" alt="" class="w-6 h-6" />
                <div class="text-sm font-bold">{{ item.title }}</div>
              </div>
            </div>
          </div>
        </van-cell-group>
      </div>
    </div>
    <van-dialog v-model:show="show" title="请选择" show-cancel-button>
      <van-date-picker
        v-model="currentDate"
        :show-toolbar="false"
        :columns-type="columnsType"
        title="选择日期"
        v-if="isDate"
      />
      <van-time-picker v-model="currentTime" :show-toolbar="false" title="选择时间" v-else />
    </van-dialog>
  </van-popup>
</template>

<style scoped></style>
